<template>
  <div class="cash">
    <van-nav-bar title="提现">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <van-tabs>
      <van-tab title="USDT提现">
        <div class="wallet">
          <van-cell title="钱包金额" size="large">
            <template #right-icon>
              <img class="shuaxin" src="../../../assets/刷新@2x.jpg" alt="" />
              <span class="shuaxin2">一键刷新</span>
            </template>
          </van-cell>
          <van-cell size="large">
            <div class="yue">
              <img class="yue1" src="../../../assets/余额@2x.jpg" alt="" />
              <span class="zhye">账户余额: <i class="red">2000.00</i> </span>
            </div>
          </van-cell>
        </div>

        <div class="bankcard" v-if="seen">
          <van-cell size="large">
            <span>USDT账户选择</span>
          </van-cell>
          <van-cell
            title="183hmJHRu1230495jhKO1wdfg"
            value="选择"
            size="large"
            is-link
            @click="usdt"
          >
          </van-cell>
        </div>
        <div class="xieyi" v-if="seen">
          <h6>请选择通用协议</h6>
          <div class="xian"></div>
          <div></div>
          <div class="hong" tabindex="1">
            <span>ERC20</span>
          </div>
          <div class="lan" tabindex="2">
            <span>TRC20</span>
          </div>
        </div>

        <div class="jine" v-if="seen">
          <h6>USDT充值金额(元)</h6>
          <div class="xian"></div>
          <span class="rmb">￥</span>
          <input
            class="chozhi"
            type="text"
            placeholder="请输入充值金额,不小于1000"
            onblur="this.placeholder='请输入充值金额,不小于1000'"
            onfocus="this.placeholder=''"
          />
          <div class="xian1"></div>
          <span class="huilv">参考汇率:1USDT≈6.4300CNY</span>
          <span class="zhifu">预计支付 <i class="ling">0</i> USDT</span>
          <p>汇率30分钟更新一次,请勿长时间停留,尽快完成充值。</p>
        </div>

        <div class="password">
          <h6>资金密码</h6>
          <div class="xian"></div>
          <input
            class="chozhi"
            type="text"
            placeholder="请输入资金密码"
            onblur="this.placeholder='请输入资金密码'"
            onfocus="this.placeholder =''"
          />
        </div>
        <button>提交</button>
        <div class="wenzi">
          温馨提示：<br />
          <br />
          1、钱包协议请务必选择 ERC20 或 TRC20 ; <br />
          2、请注意汇率与USDT金额,如长时间停留页面,提交时USDT数 量会重新变动；
          <br />
          3、如有其他问题,请联系在线客服。
        </div>
      </van-tab>
      <van-tab title="银行卡提现" @click="xianshi">
        <div class="deposit">
          <van-cell title="钱包金额" size="large">
            <template #right-icon>
              <img class="shuaxin" src="../../../assets/刷新@2x.jpg" alt="" />
              <span class="shuaxin2">一键刷新</span>
            </template>
          </van-cell>
          <van-cell size="large">
            <div class="yue">
              <img class="yue1" src="../../../assets/余额@2x.jpg" alt="" />
              <span class="zhye">账户余额: <i class="red">2000.00</i> </span>
            </div>
          </van-cell>
        </div>

        <div class="zsyh">
          <van-cell size="large">
            <span class="yhk">提现银行卡</span>
          </van-cell>

          <div class="yhkh">
            <div class="yhkh1">
              <img src="../../../assets/招商银行ICO@2x.jpg" alt="" />
              <span class="zswz">招商银行 0863</span>
            </div>

            <div class="yhkh2" @click="yhkh3">
              <span class="xuanze">选择</span>
              <van-icon class="jiantou" name="arrow"></van-icon>
            </div>
          </div>
        </div>

        <div class="chozhi1">
          <h6>提现金额（元）</h6>
          <div class="xian"></div>
          <span class="rmb">￥</span>
          <input
            class="chozhi"
            type="text"
            placeholder="请输入充值金额,不小于100"
            onblur="this.placeholder='请输入充值金额,不小于1 00'"
            onfocus="this.placeholder=''"
          />
        </div>

        <div class="password2">
          <h6>资金密码</h6>
          <div class="xian"></div>
          <input
            class="chozhi"
            type="text"
            placeholder="请输入资金密码"
            onblur="this.placeholder='请输入资金密码'"
            onfocus="this.placeholder =''"
          />
        </div>

        <button>提交</button>
        <div class="wenzi2">
          温馨提示：<br />
          <br />
          1:到账时间取决于银行处理时间;请及时查看资金是否到账 <br />
          2:如有其他问题,请联系在线客服。
        </div>
      </van-tab>
    </van-tabs>

    <!-- 弹出窗 -->
    <van-popup v-model="usdtshow" position="bottom" :style="{ height: '50%' }">
      <van-picker title="标题" show-toolbar :columns="columns" />
    </van-popup>

    <!-- 弹出窗 -->

    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <van-picker title="选择 " show-toolbar :columns="columns1" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      usdtshow: false,
      seen: true,
      columns: ["USDT账户一", "USDT账户二", "USDT账户三"],
      columns1: ["招商银行 0863", "农业银行 3749 ", " 交通银行 0875"],
    };
  },
  methods: {
    usdt() {
      this.usdtshow = true;
    },
    yhkh3() {
      this.show = true;
    },
    xianshi() {
      this.seen = false;
    },
  },
};
</script>
<style lang="less" scoped>
.cash {
  background-color: #f0f0f0;
  height: 1800px;
  .wallet {
    margin-top: 20px;
    .shuaxin {
      width: 30px;
      height: 30px;
      margin-top: 18px;
      margin-right: 15px;
    }
    .shuaxin2 {
      margin-top: 10px;
      color: #6c6e82;
    }
    .yue {
      display: flex;

      .yue1 {
        width: 60px;
        height: 60px;
      }
      .zhye {
        font-weight: 600;
      }
      span {
        margin-top: 9px;
        color: #414655;
        font-size: 30px;
        font-weight: 500;
      }
      .red {
        color: #ec5d29;
        font-style: normal;
        font-size: 45px;
      }
    }
  }
  .xieyi {
    width: 750px;
    height: 180px;
    background-color: #ffffff;

    h6 {
      padding-top: 15px;
      margin-left: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .xian {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-left: 20px;
      margin-bottom: 15px;
    }
    .hong {
      display: inline-block;
      width: 130px;
      height: 60px;
      line-height: 60px;
      margin: 0px 20px 5px 15px;
      border: 0.5px solid #f0f0f0;
      text-align: center;
      border-radius: 10px;

      span {
        font-size: 27px;
      }
    }
    .hong:hover {
      border: 0.5px solid #ec5d29;
      color: #ec5d29;
    }
    .lan {
      width: 130px;
      height: 60px;
      line-height: 60px;
      margin: 0px 100px 0 15px;
      border: 0.5px solid #f0f0f0;
      display: inline-block;
      text-align: center;
      border-radius: 10px;

      span {
        font-size: 27px;
      }
    }
    .lan:hover {
      border: 0.5px solid #1d87f3;
      color: #1d87f3;
    }
  }
  .jine {
    width: 752px;
    height: 380px;
    background-color: #ffffff;
    h6 {
      padding-top: 15px;
      margin-top: 19px;
      margin-left: 13px;
      margin-bottom: 15px;
    }
    .xian {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-left: 20px;
      margin-bottom: 25px;
    }
    .chozhi {
      border: none;
      margin-top: 40px;
      margin-bottom: 30px;
      width: 500px;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #aab2bd;
      /* placeholder字体大小  */
      font-size: 25px;
      /* placeholder位置  */
      text-align: left;
    }
    .rmb {
      color: #5c5d60;
      font-size: 32px;
    }
    .xian1 {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-top: 30px;
      margin-left: 20px;
      margin-bottom: 10px;
    }
    .huilv {
      font-size: 20px;
      color: #5c5d60;
      margin-left: 15px;
      margin-right: 170px;
    }
    .zhifu {
      font-size: 20px;
      color: #5c5d60;
      margin-left: 15px;
    }
    .ling {
      color: #ec5d29;
      font-style: normal;
    }
    p {
      margin-top: 5px;
      margin-bottom: 10px;
      font-size: 20px;
      margin-left: 15px;
      color: #ec5d29;
    }
  }
  .password {
    width: 750px;
    height: 180px;
    background-color: #ffffff;
    h6 {
      padding-top: 15px;
      margin-top: 19px;
      margin-left: 13px;
      margin-bottom: 15px;
    }
    .xian {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-left: 20px;
      margin-bottom: 25px;
    }

    .chozhi {
      border: none;
      margin-top: 10px;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #aab2bd;
      /* placeholder字体大小  */
      font-size: 25px;
      /* placeholder位置  */
      text-align: left;
      margin-left: 50px;
    }
  }
  button {
    width: 650px;
    height: 85px;
    border-radius: 15px;
    margin-top: 35px;
    font-size: 30px;
    background-image: linear-gradient(#fa7d22, #fa461b);
    border: none;
    color: #ffffff;
    // text-align: center;
    margin-left: 50px;
  }
  .wenzi {
    margin-top: 30px;
    font-size: 12px;
    color: #a5a9b3;
    margin-left: 15px;
  }
  .bankcard {
    margin-top: 20px;
  }

  .deposit {
    margin-top: 20px;

    .shuaxin {
      width: 30px;
      height: 30px;
      margin-top: 18px;
      margin-right: 15px;
    }
    .shuaxin2 {
      margin-top: 10px;
      color: #6c6e82;
    }
    .yue {
      display: flex;

      .yue1 {
        width: 60px;
        height: 60px;
      }
      .zhye {
        font-weight: 600;
      }
      span {
        margin-top: 9px;
        color: #414655;
        font-size: 30px;
        font-weight: 500;
      }
      .red {
        color: #ec5d29;
        font-style: normal;
        font-size: 45px;
      }
    }
  }
  .zsyh {
    margin-top: 20px;
    .yhk2 {
      width: 30px;
      height: 30px;
      margin-top: 18px;
      margin-right: 15px;
    }
    .yhk {
      font-weight: 600;
    }
    .yhkh {
      width: 760px;
      height: 95px;
      background-color: white;
      margin: 0;
      display: flex;
      justify-content: space-between;
      .yhkh1 {
        display: flex;
        left: 30px;
      }
      img {
        width: 45px;
        height: 45px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 15px;
      }
      .zswz {
        color: #5c5d60;
        font-size: 30px;

        margin-top: 23px;
      }
      .yhkh2 {
        display: flex;
      }
      .jiantou {
        color: #5c5d60;
        font-size: 25px;
        margin-top: 32px;
        margin-right: 35px;
      }
      .xuanze {
        font-size: 25px;
        color: #5c5d60;
        margin-right: 15px;
        margin-top: 25px;
      }
    }
  }
  .chozhi1 {
    width: 752px;
    height: 245px;
    background-color: #ffffff;
    h6 {
      margin-top: 26px;
      margin-left: 13px;
      margin-bottom: 15px;
    }
    .xian {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-left: 20px;
      margin-bottom: 25px;
    }
    .chozhi {
      border: none;
      margin-top: 50px;
      width: 500px;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #aab2bd;
      /* placeholder字体大小  */
      font-size: 30px;
      /* placeholder位置  */
      text-align: left;
    }
    .rmb {
      color: #5c5d60;
      font-size: 32px;
    }
  }
  .password2 {
    width: 750px;
    height: 180px;
    background-color: #ffffff;
    h6 {
      padding-top: 15px;
      margin-top: 19px;
      margin-left: 13px;
      margin-bottom: 15px;
    }
    .xian {
      width: 720px;
      border: 0.5px solid #f0f0f0;
      margin-left: 20px;
      margin-bottom: 25px;
    }

    .chozhi {
      border: none;
      width: 400px;
      margin-top: 10px;
    }
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #aab2bd;
      /* placeholder字体大小  */
      font-size: 25px;
      /* placeholder位置  */
      text-align: left;
      margin-left: 50px;
    }
  }
  .wenzi2 {
    margin-top: 30px;
    font-size: 12px;
    color: #a5a9b3;
    margin-left: 15px;
  }
}
</style>
